﻿@page "/components/rating"

<DocsPage>
    <DocsPageHeader Title="Rating" SubTitle="Ratings provide insight regarding other's opinions and experiences with a product.">
        <Description>Collecting user feedback via ratings is a simple analytic that can provide a lot of feedback to your product or application.</Description>
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Rating">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <BasicRatingExample />
            </SectionContent>
            <SectionSource Code="BasicRatingExample" GitHubFolderName="Rating"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Disabled">
                <Description>A disabled component cannot change its state. Use the <CodeInline>Disabled</CodeInline> parameter to disable a component.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <RatingDisabledExample />
            </SectionContent>
            <SectionSource Code="RatingDisabledExample" GitHubFolderName="Rating"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Read only">
                <Description>A read-only component doesn't allow interactions. Use the <CodeInline>ReadOnly</CodeInline> parameter to mark a component as read-only.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <RatingReadonlyExample />
            </SectionContent>
            <SectionSource Code="RatingReadonlyExample" GitHubFolderName="Rating"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Sizes">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <RaitngSizesExample />
            </SectionContent>
            <SectionSource Code="RaitngSizesExample" GitHubFolderName="Rating"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Max value">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <RaitngMaxValueExample />
            </SectionContent>
            <SectionSource Code="RaitngMaxValueExample" GitHubFolderName="Rating"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Icons and color">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <RaitngIconsAndColorExample />
            </SectionContent>
            <SectionSource Code="RaitngIconsAndColorExample" GitHubFolderName="Rating"  />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Events and value binding">
                <Description> The <CodeInline>MudRating</CodeInline> component provides value binding and events for changed selected value or hover. E.g you can display a label on hover to help users pick the correct rating value, using parameters like <CodeInline>HoveredValueChanged</CodeInline>, <CodeInline>SelectedValueChanged</CodeInline> and <CodeInline>bind-SelectedValue</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <RatingBindingsExample />
            </SectionContent>
            <SectionSource Code="RatingBindingsExample" GitHubFolderName="Rating"  />
        </DocsPageSection>


    </DocsPageContent>
</DocsPage>
